<template>
  <div>
    <el-breadcrumb separator="/" style="margin-bottom: 20px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/my' }">我的</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6" class="my-left">
        <el-card>
          <el-row>
            <el-col :span="6" style="text-align: center">
              <el-avatar circle :size="64" :src="userInfo.avatar"></el-avatar>
              <input
                id="uploadAvatar"
                type="file"
                ref="fileUploader"
                style="padding: 15px; width: 80px"
              />
              <el-button
                size="small"
                type="primary"
                @click="handleUpload"
                style="margin: 15px"
                >上传头像</el-button
              >
            </el-col>
            <el-col :span="18">
              <h3 style="padding-left: 35px">{{ userInfo.nickname }}</h3>
              <p style="margin-top: -6px; padding-left: 35px">
                <span class="el-icon el-icon-mobile-phone"></span>
                {{ userInfo.phone }}
                <el-button
                  size="small"
                  type="primary"
                  v-if="!userInfo.phone"
                  @click="dialogFormVisible = true"
                  >绑定手机号</el-button
                >
              </p>
              <p style="margin-top: -6px; padding-left: 35px">
                <span class="el-icon el-icon-place"></span>
                {{ userInfo.city }}
              </p>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="info-card">
          <div @click="showUserEditPanel('delivery')">
            <span class="el-icon el-icon-place"></span>
            <span class="el-icon-arrow-right" style="float: right"></span>
            修改收货地址
          </div>

          <el-divider></el-divider>
          <div @click="showUserEditPanel('password')">
            <span class="el-icon el-icon-lock"></span>
            <span class="el-icon-arrow-right" style="float: right"></span>
            修改登录密码
          </div>
          <el-divider></el-divider>
          <div @click="showUserEditPanel('info')">
            <span class="el-icon el-icon-user"></span>
            <span class="el-icon-arrow-right" style="float: right"></span>
            修改用户昵称
          </div>
          <el-divider></el-divider>
        </el-card>
      </el-col>
    </el-row>
    <user-edit-pane :currentTab="currentTab"></user-edit-pane>

    <el-dialog title="绑定手机号" :visible.sync="dialogFormVisible">
      <el-form
        ref="phoneForm"
        :model="phoneForm"
        :label-width="formLabelWidth"
        :rules="formRules"
      >
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="phoneForm.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="handleSetPhone">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UserEditPane from "../components/my/UserEditPane";
import consumerService from "../service/ConsumerService";
export default {
  data() {
    const phoneValidator = (role, value, callback) => {
      if (/^1[3456789]\d{9}$/.test(value)) {
        callback();
      } else {
        callback(new Error("手机号码格式不正确!"));
      }
    };
    return {
      phoneForm: {
        phone: "",
      },
      formRules: {
        phone: [
          { required: true, message: "请输入登录手机号", trigger: "blur" },
          { validator: phoneValidator, trigger: "blur" },
        ],
      },
      formLabelWidth: "100px",
      dialogFormVisible: false,
      nickNameShow: true,
      userInfo: {
        // nickname:"",
        // phone:"",
        // avatar:"",
        // sex:"",
        // city:""
      },
      currentTab: "devliery",
    };
  },
  created() {
    consumerService.getConsumerInfo().then((res) => {
      this.userInfo = res;
      console.log(this.userInfo);
    });
  },
  methods: {
    getUserInfo() {
      consumerService.getConsumerInfo().then((res) => {
        this.userInfo = res;
        console.log(this.userInfo);
      });
    },

    resetForm() {
      this.phoneForm.phone = "";
      this.dialogFormVisible = false;
    },
    async handleSetPhone() {
      this.$refs["phoneForm"].validate(async (valid) => {
        if (valid) {
          console.log(this.phoneForm.phone);
          // 设置用户手机号
          consumerService.bindPhone(this.phoneForm.phone);
          this.$message({
            message: "绑定手机号成功",
            type: "success",
          });
          this.$store.state.userInfo.phone = this.phoneForm.phone
          this.resetForm();
          this.getUserInfo()
          window.location.reload()
        } else {
           this.$message({
            message: "格式错误",
            type: "error",
          });
        }
      });
    },
    async handleUpload() {
      const fileList = this.$refs.fileUploader.files;
      try {
        const avatar = await consumerService.uploadAvatar(fileList);
        //console.log(avatar);
        if (avatar) {
          this.$message.success("上传头像成功");
          this.userInfo.avatar = avatar;
        }
      } catch (e) {
        this.$message.error(e.message);
      }
      document.getElementById("uploadAvatar").value = "";
      window.location.reload();
    },
    showUserEditPanel(tab) {
      this.currentTab = tab;
      this.$store.commit("toggleUserEditPanel");
    },
  },
  components: {
    UserEditPane,
  },
};
</script>

<style lang="less" scoped>
.my-left {
  h3 {
    margin-top: 10px;
    margin-left: 10px;
  }
}
.info-card {
  margin-top: 10px;
  font-size: 14px;
  div {
    cursor: pointer;
  }
}
</style>
